<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>@media 媒体查询</title>

		<style>
			@media screen and (max-width: 900px) {
				/* 屏幕宽度小于或等于900px，文字变成红色 */
				.container h3 {
					color: red;
				}
			}

			@media screen and (min-width: 901px) {
				/* 屏幕宽度大于900px，文字变成蓝色 */
				.container h3 {
					color: blue;
				}
			}

			@media screen and (max-width: 600px) and (min-width: 300px) {
				/* 屏幕宽度在300px到600px之间，文字变成绿色 */
				.container h3 {
					color: green !important;
				}
			}
		</style>
	</head>
	<body>
		<!--
    @media 媒体查询

    @media 媒体类型 and (媒体特征) {
        /* 样式 */
    }

    媒体类型：
    all	用于所有多媒体类型设备
    print	用于打印机
    screen	用于电脑屏幕，平板，智能手机等。
    speech	用于屏幕阅读设备

    媒体特征：
    width	指定设备的宽度
    height	指定设备的高度
    device-width	指定设备的宽度，单位是像素
    device-height	指定设备的高度，单位是像素
    orientation	指定设备的方向，portrait(竖屏)或landscape（横屏）
    aspect-ratio	指定设备的纵横比
    color	指定设备的颜色数
    color-index	指定设备的颜色索引
    monochrome	指定设备的单色位数
    resolution	指定设备的分辨率
    scan	指定设备的扫描方式，progressive或interlaced
    grid	指定设备是否使用网格布局
    -->

		<div class="container">
			<h3>
				屏幕宽度小于或等于900px，文字变成红色。
				<br />
				屏幕宽度大于900px，文字变成蓝色。
			</h3>
		</div>
	</body>
</html>
